import React, { useRef, useState, useEffect } from 'react';
import { v1 as uuidv1 } from 'uuid';

// 萤石云视频播放组件，支持监控模式
const Video = ({ url, options }) => {
  const videoId = useRef('v' + uuidv1());
  const videoRef = useRef();
  useEffect(() => {
    console.log(url, options);
    let videoObj;
    if (!url) return;
    setTimeout(() => {
      let container = document.querySelector(`#${videoId.current}`);
      container.src = url;
      videoRef.current = videoObj = new window.EZUIKit.EZUIPlayer({
        id: videoId.current,
      });
    }, 300);
    return () => {
      if (videoObj) {
        videoObj.stop();
      }
    };
  }, [url]);

  return (
    <div
      className="video"
      style={{
        width: options.width,
        height: options.height,
      }}
    >
      <video
        id={videoId.current}
        // id="video-container"
        autoPlay={true}
        controls
        width={options.width || '356px'}
        style={{ width: '100%', height: '100%' }}
        playsInline
      />
    </div>
  );
};

export default Video;
